<template>

    <!--TAB1 示例 S-->
	<view class="list" v-if="tabindex=='111' && list.length>0">
		<navigator :url="'/pages/demo/article/detail?id=' + item.id" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="info">
				<view class="text">
					<view class="title">{{ item.title }}</view>
					<view class="other">
						<view class="left">
							<view class="source" v-if="item.source">{{ item.source }}</view>
							<view class="time">{{ item.create_time }}</view>
						</view>
						<view class="right" v-if="item.comment_count > 0">
							<image src="/static/images/icon_comment.png"></image>
							<text>{{ item.comment_count }}</text>
						</view>
						<view class="right view" v-else>
							<image src="/static/images/icon_view.png"></image>
							<text>{{ item.read }}</text>
						</view>
					</view>
				</view>
				<view class="photo"><image :src="item.photo_url" mode="aspectFill"></image></view>
			</view>
			<view class="line"></view>
		</navigator>
	</view>
    <!--TAB1 示例 S-->

    <!--TAB2 示例 S-->
	<view class="me-goods-list" v-else-if="tabindex=='222' && list.length>0">
        <navigator :url="'/pages/demo/article/detail?id=' + good.id" class="good-li" :id="'good'+good.id" v-for="good in list" :key="good.id" hover-class="none">
			<image class="good-img" :src="good.goodImg" mode="widthFix"/>
			<view class="flex-item">
				<view class="good-name">{{good.goodName}}</view>
				<text class="good-price">{{good.goodPrice}} 元</text>
				<text class="good-sold">已售{{good.goodSold}}件</text>
			</view>
        </navigator>
	</view>
    <!--TAB2 示例 S-->

    <!--TAB3 示例 S-->
    <view class="whzx_main" v-else-if="tabindex=='333' && list.length>0">
        <navigator :url="'/pages/demo/article/detail?id=' + item.id" class="d_whzx" v-for="(item, index) in list" :key="index" hover-class="none">
            <image :src="item.image" mode="aspectFill"></image>
            <view class="con">
                <view style="height:165rpx;overflow: hidden">
                    <view class="tits">{{item.title}}</view>
                    <view class="info">{{item.content}}</view>
                </view>
                <view class="time">
                    <text>发布时间：{{item.adddate}}</text>
                    <text>作者：{{item.author||'管理员'}}</text>
                </view>
            </view>
        </navigator>
    </view>
    <!--TAB3 示例 E-->
</template>

<script>
/**
 * 1、刷新：如果在此页面需要控制刷新当前tab数据则可调用父页面的这个函数：this.$emit('refreshTab');【更多使用方法请移步至源函数查阅】
 * 2、如果需要获取当前tab序号则用：this.tabindex
 * 注：特别注意此页面无生命周期，以及无法使用原生组件，原生组件和fixed元素需要写在mescroll-uni的外面 否则滚动列表会抖动（但使用uView这些组件是没问题的）
 */
export default {
    props:{
        //数据列表
        list: {
            type: Array,
            default(){
                return []
            }
        },
        //当前tab的标识ID
        tabindex: {
            type: [String,Number],
            default: ''
        },
    }
}
</script>

<style lang="scss">
/***** TAB1 示例 S *****/
.list {
	margin-top: 2rpx;
	.item {
		padding: 40rpx 24rpx 0 24rpx;
		.info {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-bottom: 4rpx;
			.text {
				flex-grow: 1;
				flex-shrink: 1;
				display: flex;
				flex-direction: column;
				margin-right: 40rpx;
				.title {
					flex-grow: 1;
					flex-shrink: 1;
					font-size: 34rpx;
					line-height: 1.5;
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					height: 72rpx;
					margin-bottom: 8rpx;
				}
				.other {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999;
					line-height: normal;
					.left {
						display: flex;
						flex-grow: 1;
						flex-shrink: 1;
						.source {
							display: -webkit-box;
							text-overflow: ellipsis;
							word-break: break-all;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							width: 140rpx;
							margin-right: 16rpx;
						}
					}
					.right {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						flex-grow: 0;
						flex-shrink: 0;
						margin-right: 5rpx;
						image {
							flex-grow: 1;
							flex-shrink: 1;
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
						text {
							flex-grow: 1;
							flex-shrink: 1;
							margin-top: -6rpx;
						}
					}
					.view {
						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 5rpx;
						}
					}
				}
			}
			.photo {
				image {
					height: 170rpx;
					width: 222rpx;
					border-radius: 10rpx;
				}
			}
		}
		.line {
			display: bock;
			width: 100%;
			height: 1rpx;
			margin-top: 22rpx;
			background: #e8e8e8;
		}
		&:last-child {
			.line {
				//display: none;
			}
			//padding-bottom: 30rpx;
		}
	}
}
/***** TAB1 示例 E *****/

/***** TAB2 示例 S *****/
.me-goods-list {
	background-color: #fff;

	.good-li {
		display: flex;
		align-items: center;
		padding: 20upx;
		border-bottom: 1upx solid #eee;
		.good-img {
			width: 160upx;
			height: 160upx;
			margin-right: 20rpx;
		}
		.flex-item {
			flex: 1;
			.good-name{
				font-size: 26upx;
				line-height: 40upx;
				height: 80upx;
				margin-bottom: 20upx;
				overflow: hidden;
			}
			.good-price {
				font-size: 26upx;
				color: red;
			}
			.good-sold {
				font-size: 24upx;
				margin-left: 16upx;
				color: gray;
			}
		}
	}
}
/***** TAB2 示例 E *****/

/***** TAB3 示例 S *****/
.whzx_main{
    padding: 10rpx 20rpx 7rpx 20rpx;
}
.d_whzx{
	display: -webkit-flex;
	display: flex;
	padding: 35rpx 0;
	justify-content: space-between;
	border-bottom: 5rpx #f8f8f8 solid;
	overflow: hidden;
}
.d_whzx:last-child{
	border-bottom: none;
}
.d_whzx image{
	width: 271rpx;
	height: 209rpx;
	margin-right: 35rpx;
}
.d_whzx .con{
	-webkit-flex: 1;
	flex: 1;
}
.d_whzx .tits{
	display: -webkit-flex;
	display: flex;
	font-size: 29rpx;
	color: #000000;
	line-height: 45rpx;
	max-height: 90rpx;
	overflow: hidden;
	margin-top: -6rpx;
}
.d_whzx .info{
	display: -webkit-flex;
	display: flex;
	font-size: 22rpx;
	color: #666666;
	line-height: 38rpx;
	height: 104rpx;
	margin-top: 8rpx;
	overflow: hidden;
	word-wrap:break-word;
	word-break:break-all;
}
.d_whzx .time{
	padding-top: 14rpx;
    padding-right: 15rpx;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 20rpx;
	color: #bbb;
}
/***** TAB3 示例 E *****/


</style>
